<template>
  <view class="InputDateTime">
    <u-input
      v-bind="$attrs"
      v-model="asyncModelValue"
      :border="border"
      disabled
      @click="inputClick"
      :placeholder="placeholder"
    ></u-input>
    <u-datetime-picker
      v-bind="$attrs"
      :show="showTimeSelect"
      v-model="dataTimePickData"
      :mode="mode"
      closeOnClickOverlay
      @close="showTimeSelect=false;"
      @confirm="confirm"
      @cancel="cancel"
    ></u-datetime-picker>
  </view>
</template>

<script lang="ts">
import {TimeUtils} from "../../utils/TimeUtils";

export default {
  name: 'InputDateTime',
  emits: ['update:modelValue','confirm','cancel'],
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    border: {
      type: String,
      default: 'none'
    },
    formatter: { // 使用 moment 库的formatter格式
      type: String,
      default: 'YYYY-MM-DD'
    },
    mode: {
      type: String,
      default: 'date'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
  },
  computed: {
    asyncModelValue: {
      get() {
        return this.modelValue
      },
      set(val) {
        this.$emit('update:modelValue',val)
      }
    },
    dataTimePickData: { // 这个是时间戳
      get() {
        let dateTime = TimeUtils.parseTimeToDate(this.asyncModelValue,this.formatter).getTime()
        return dateTime
      },
      set(val) {
        let formatterTime = TimeUtils.parseTime(val,this.formatter)
        this.asyncModelValue = formatterTime
      }
    }
  },
  data(){
    return {
      showTimeSelect: false,
    }
  },
  methods: {
    inputClick() {
      if(!this.disabled) {
        this.showTimeSelect=true
      }
    },
    confirm() {
      this.showTimeSelect=false
      this.$emit('confirm')
    },
    cancel() {
      this.showTimeSelect=false
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.InputDateTime{
  width: 100%;
}
</style>
